<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: 怪物大师
  Date: 2024/6/21
  Time: 17:34
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }
        .header {
            background: #fff;
            padding: 10px 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }
        .header h1 {
            margin: 0;
            font-size: 24px;
        }
        .header nav a {
            margin: 0 15px;
            text-decoration: none;
            color: #333;
        }
        .container {
            display: flex;
            justify-content: center;
            padding: 20px;
        }
        .room-image {
            flex: 1;
            max-width: 400px;
            margin-right: 20px;
        }
        .room-image img {
            width: 100%;
            height: auto;
            border-radius: 8px;
        }
        .room-details {
            flex: 1;
            max-width: 400px;
        }
        .room-info {
            margin-bottom: 20px;
        }
        .room-info p {
            margin: 5px 0;
        }
        form {
            display: flex;
            flex-direction: column;
        }
        label, input, button {
            margin: 5px 0;
            padding: 8px;
        }
        button {
            cursor: pointer;
            background-color: #5cb85c;
            color: white;
            border: none;
            border-radius: 4px;
        }
        button:hover {
            background-color: #4cae4c;
        }
    </style>

</head>
<body>

<div class="header">
    <h1>Sona.</h1>
    <nav>
        <a href="index.jsp">首页</a>
        <a href="roomviewa.jsp">在线订房</a>
        <a href="#">关于我们</a>
        <a href="#">联系方式</a>
        <a href="login.jsp">系统管理</a>
    </nav>
</div>
<div class="container">

            <div class="room-image">
                <img src="${pageContext.request.contextPath}/img/room${room.room_id % 3}.PNG"
                     alt="${room.room_name}">
                <div class="room-info">
                    <p>房间名称:${room.room_name}</p>
                    <p>价格: ${room.room_price}元/天</p>
                    <p>大小: ${room.room_area}平方米</p>
                </div>
            </div>


    
    <div class="room-details">
        <form action="${pageContext.request.contextPath}/AddOrderandCustomerServlet" method="post">

            <label for="alstartDate" class="mr-2">开始日期</label>
            <input type="date" id="alstartDate" name="order_start" class="form-control mr-2">

            <label for="alendDate" class="mr-2">截止日期</label>
            <input type="date" id="alendDate" name="order_end" class="form-control mr-2">

            <label for="customer_name">姓名</label>
            <input type="text" id="customer_name" name="customer_name" required>

            <label for="identity_num">身份证:</label>
            <input type="text" id="identity_num" name="identity_num" required>

            <label for="sex">性别:</label>
            <input type="text" id="sex" name="sex" required>

            <label for="contact">电话号码:</label>
            <input type="text" id="contact" name="contact" required>
            <%--房间名字 --%>
            <input type="text" style="display: none"
                   name="order_room_name" value="${room.room_name}" >

            <button type="submit">提交预定</button>
        </form>
    </div>
</div>
<c:if test="${not empty error}">
    <script type="text/javascript">
        alert("${error}");
    </script>
</c:if>
</body>

</html>
